<template>
  <div class="back" :class="{sticky: sticky}">
     <van-nav-bar
      :title="title"
      left-text=""
      left-arrow
      safe-area-inset-top
      @click-left="back"
    >
      <template #right>
        <slot name="back-right"></slot>
      </template>
    </van-nav-bar>
  </div>
</template>


<script>
  export default {
    name: 'Back',
    props: {
      title: {
        type: String,
        default: ''
      },

      sticky: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      back() {
        this.$router.back();
      }
    }
  }
</script>

<style lang="less" scoped>
  .sticky{
      position: sticky;
      top: 0;
    }
  .back{
    
    /deep/ .van-nav-bar .van-icon{
      color: black;
      font-weight: bold;
      font-size: 20px;
    }

    /deep/ .van-ellipsis{
      font-size: 18px;
      font-weight: bold;
      color: black;
    }
  }
</style>